<template>
  <div class="home-container">
    <div style="width:100%;margin:40px 0px 20px 0px">
      <el-carousel :interval="4000" type="card" height="350px" >
        <el-carousel-item v-for="(item, index) in dataList" :key="index" >
          <img :src="item.imageUrl" class="h-card" 
            @click="$router.push({path:'/gathers', query:{gid:item.gid}})"
            style=""/>
          <p class="h-text"
            @click="$router.push({path:'/gathers', query:{gid:item.gid}})"
            >{{item.title}}</p>
        </el-carousel-item>
      </el-carousel>
    </div>
    <keep-alive>
      <top-list style="width:100%"/>
    </keep-alive>
    <keep-alive>
      <top-gather style="width:100%"/>
    </keep-alive>
    <keep-alive>
      <top-artist style="width:100%"/>
    </keep-alive>
    <div class="h-link">
      <p class="h-header">友情链接</p>
      <div style="float:left;margin-bottom:20px">
        <el-link class="h-domain" :underline="false" href="http://www.kuwo.cn/" target="_blank">酷我音乐</el-link>
        <el-link class="h-domain" :underline="false" href="https://www.kugou.com/" target="_blank">酷狗音乐</el-link>
        <el-link class="h-domain" :underline="false" href="https://music.taihe.com/" target="_blank">千千静听</el-link>
        <el-link class="h-domain" :underline="false" href="https://music.163.com/" target="_blank">网易云音乐</el-link>
      </div>
    </div>
  </div>
</template>

<script>
import { getGathersService } from '@/api/music'
import { stringTime } from '@/utils/util'
import { error } from '@/utils/toast'
import topList from './topList' // 导出按钮组件
import topGather from './topGather' // 导出按钮组件
import topArtist from './topArtist' // 导出按钮组件
export default {
  components: {
    topList,
    topGather,
    topArtist,
  },  
  data() {
    return {
      dataList:[],
    };
  },
  created() {
    this.getData()
  },
  methods: {
    stringTime,
    async getData() {
      const resp = await getGathersService({limit:5, gtype:'T'})
      if (!resp || 0 !== resp.result) {
        error(resp.message)
        return
      }

      this.dataList = resp.data.map(item => {
        item.icon = false
        if (item.imgtype == "1") {
          item.imageUrl = "/mpi/gather/image?gid=" + item.gid
        } else {
          item.imageUrl = item.g_image
        }
          
        return {
          ...item
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .home-container {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    // width: 100%;
    height: 100%;
    margin: 0 auto;
    width:1300px;
  }

  .h-link {
    width:100%;
    zoom: 1;

    .h-domain {
      height:30px;
      line-height: 30px;
      float:left;
      margin-right:10px;
    }
  }

  .h-link:after {
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
  }

  .h-header {
    text-align:left;
    font-size:24px;
    font-weight:600;
    margin-bottom:20px;
  }

  .h-card {
    width:100%;
    height:100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    // object-fit: ;
  }

  .h-text {
    position: relative;
    top:-33px;
    margin:0px;
    height:30px;
    line-height: 30px;
    padding:0px 20px;
    width:calc(100% - 40px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    text-align: left;
    color:#fff; 
    background-color:rgba(#606060, 0.8);
    font-size:16px;
  }

  .h-text:hover {
    color:#409EFF; 
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

</style>